<template>
    <div class="app-container">
        <div class="app-box">
            <div class="swipe-container">
            
                <!-- <van-swipe :autoplay="3000" indicator-color="white">
                    <!-- banner1 -->
                    <van-swipe-item >
                        <div class="swipe-item swipe-banner1" @click="$router.push('/h5/banner1')">
                            <div class="swipe-title">什么是一卡通?</div>
                            <div class="swipe-subtitle">5种量化策略可选择</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner2 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner2" @click="$router.push('/h5/banner2')">
                            <div class="swipe-title">实时通知</div>
                            <div class="swipe-subtitle">订阅后，24h实时公众号推送</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner3 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner3" @click="$router.push('/h5/banner3')">
                            <div class="swipe-title">翻倍山寨</div>
                            <div class="swipe-subtitle">分析师翻倍山寨定期潜伏</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner4 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner4"  @click="$router.push('/h5/banner4')">
                            <div class="swipe-title">邀请拿提成</div>
                            <div class="swipe-subtitle">各种推广福利拿捏</div>
                        </div>
                    </van-swipe-item>
                </van-swipe> -->
            </div>
            


            <!-- 策略 -->
            <!-- left-icon="volume-o" 1989fa -->

            <!-- notice通知 -->
            <van-notice-bar 
                color="#7d7d7d"
                background="transparent"
                left-icon="volume-o"
                mode="link"
                :text="noticeText"  
                @click="$router.push('/h5/banner1')"
            />
            <div class="container-pad">
                <div class="system strategy-container">
                    <div class="system-title">AG五大顶级策略(成功率由高到低)</div>
                    <van-swipe :loop="false" indicator-color="white" :width="160" :show-indicators="false">
                        <!-- @click="$router.push('/strategy/index')" -->
                        <van-swipe-item>
                            <div class="swipe-item swipe-strategy1" >
                                <div class="swipe-title">高低点预警</div>
                                <div class="swipe-subtitle">实时提醒局部价格高低点,捕捉短线交易机会</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item>
                            <!-- @click="$router.push('/strategy/02')" -->
                            <div class="swipe-item swipe-strategy2" >
                                <div class="swipe-title">异动预测</div>
                                <div class="swipe-subtitle">提前预测暴涨或暴跌.把握大行情起爆点</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item>
                            <!--  @click="$router.push('/strategy/03')" -->
                            <div class="swipe-item swipe-strategy3">
                                <div class="swipe-title">1.0信号</div>
                                <div class="swipe-subtitle">分析师翻倍山寨定期潜伏</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item>
                            <!-- @click="$router.push('/strategy/04')" -->
                            <div class="swipe-item swipe-strategy4"  >
                                <div class="swipe-title">2.0信号</div>
                                <div class="swipe-subtitle">各种推广福利拿捏</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item>
                            <div class="swipe-item swipe-strategy5"  @click="$router.push('/strategy/05')">
                                <div class="swipe-title">策略5</div>
                                <div class="swipe-subtitle">各种推广福利拿捏</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item>
                            <div class="swipe-item swipe-strategy5"  @click="$router.push('/h5/banner4')">
                                <div class="swipe-title">免费量化信号</div>
                                <div class="swipe-subtitle">点击查看</div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>

                </div>
                
                <div class="system">
                    <div class="system-title">长线翻倍山寨区</div>
                    
                </div>
            </div>
            
        </div>
       
        
    </div>
</template>

<script>
import { utilsMixin } from '@/mixin/utils'
import { dateFormat } from '@/utils/date-format';
import { getMyInfo } from '@/api/home'
export default {
    name: 'main',
    mixins: [utilsMixin],
    data() {
        return {
            noticeText: `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy-MM-dd', )}`,
        }
    },
    created() {
        getMyInfo().then(response => {
            this.pushState = response.data.pushState
            //   if (!this.pushState) {
            //     this.pushState = 'YES'
            //   }
            // this.noticeText = `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy-MM-dd', )}`;
        })
    },
    mounted() {
        console.log('=========', `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy.MM.dd', )}`)
        // this.noticeText = `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy-MM-dd', )}`;
    },
    methods: {

    },
}
</script>

<style lang="less" scoped>
.app-box {
    height: calc(100vh - 60px);
    .van-notice-bar {
        // padding: 0;
    }
}
.swipe-container {
    margin-top: 16px;
    .van-swipe-item {
        padding: 0 16px;
        box-sizing: border-box;

        .swipe-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 160px;
            border-radius: 8px;
            color: #fff;
            .swipe-title {
                font-size: 20px;
                margin-bottom: 10px;
                font-weight: 600;
            }
            .swipe-subtitle {
                font-size: 14px;
                padding: 0 20px;
                text-align: center;
                border: 1px solid #fff;
                border-radius: 4px;
                height: 32px;
                line-height: 32px;
                font-weight: 500;
            }
        }
        .swipe-banner1 {
            background: #fd9568;
        }
        .swipe-banner2 {
            background: #ffd567;
        }
        .swipe-banner3 {
            background: #f05b64;
        }
        .swipe-banner4 {
            background: #2f8cfe;
        }

    }

   
}
.strategy-container {
    .van-swipe-item {
        margin-left: 8px;
        font-size: 14px;
        color: #fff;
        &:first-child {
            margin-left: 0;
        }
    }
    .swipe-item {
        border-radius: 8px;
        width: 100%;
        height: 100px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        // align-items: center;
        justify-content: center;
        flex-direction: column;
        font-weight: 500;
        .swipe-subtitle {
            margin-top: 4px;
            font-size: 12px;
            line-height: 20px;
        }
    }

    .swipe-strategy1 {
        background: #feb986;
    }
    .swipe-strategy2 {
        background: #b69eff;
    }
    .swipe-strategy3 {
        background: #7eaeff;
    }
    .swipe-strategy4 {
        background: #f05b64;
    }
    .swipe-strategy5 {
        background: #ab7575;
    }
    .swipe-strategy6 {
        background: #9dd061;
    }
}


.system-title {
    margin: 10px 0;
    font-weight: 500;
    font-size: 14px;
}

</style>